<main id="report_resources">
  <hl-page-header title="实时资源租赁报表" class="mb-20">
    <hl-button type="outline" @on-click="excl" v-if="quanxian.indexOf('c374')">导出</hl-button>
  </hl-page-header>
  <div class="search-container">
    <div class="hl-global-search-item mr-10">
      <div class="hl-global-search-title">项目</div>
      <div>
        <hl-select :data="projectList" v-model="projectIdSelect" :width="200" @on-change="getProjectItem"></hl-select>
      </div>
    </div>
    <div class="hl-global-search-item mr-10">
      <div class="hl-global-search-title">信息搜索</div>
      <div class="global_search">
        <span class="icon-Gm-search"></span>
        <input :value="keyword" v-model="keyword" autocomplete="off" type="text" class="global_ipt_text"
          placeholder="客户名称/合同编号" @keyup.enter="search" />
      </div>
    </div>
    <div class="hl-global-search-item mr-10">
      <div class="hl-global-search-title">账单日期</div>
      <div>
        <web-calendar v-model="billDate" tips="账单日期" width="156"></web-calendar>
      </div>
    </div>
    <hl-button @on-click="search" size="mini">查询</hl-button>
    <hl-button @on-click="reset" size="mini">重置</hl-button>
  </div>

  <div class="screening-container">
    <div class="screening-item">
      <div class="mr-10 screening-title">租赁状态</div>
      <div>
        <hl-checkbox-button :data="rentStatus" v-model="selectedRent" @on-click="rentClick" merge></hl-checkbox-button>
      </div>
      <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar"></span>
    </div>
  </div>
  <div class="rent-content br-4 global_table relative" style="padding:0;">
		<div class="hl-custom-tabl-dialog" v-if="loadingFlag"><img src="assets/images/loading.gif" alt=""><div>加载中...</div></div>
    <table>
      <thead>
        <tr class="global_table_title">
          <th>序</th>
          <th>项目名称</th>
          <th>楼栋</th>
          <th>楼层</th>
          <th>单元</th>
          <th>测绘面积(m²)</th>
          <th>租赁状态</th>
          <th>合同面积(m²)</th>
          <th>客户名称</th>
          <th>合同编号</th>
          <th>签订类型</th>
          <th>合同起始日</th>
          <th>合同终止日</th>
          <th>当前时点单价</th>
          <th>单价变价</th>
        </tr>
        <thead>
        <tbody>
          <tr v-for="(item, index) in untilContracts" class="global_table_item">
            <td>{{index+1}}</td>
            <td>{{item.projectName || '--'}}</td>
            <td>{{item.buildingName || '--'}}</td>
            <td>{{item.floorNum || '--'}}</td>
            <td>{{item.unitName || '--'}}</td>
            <td>{{item.unitAcreage || '--'}}</td>
            <td>{{item.rentState | rentState}}</td>
            <td>{{item.rentUnitAcreage || '--'}}</td>
            <td>{{item.zlfName || '--'}}</td>
            <td>{{item.cCode || '--'}}</td>
            <td>{{item.signType? item.signType == 'N' ? '新签' : '续签' :'--'}}</td>
            <td>{{item.beginDate | UTCdate}}</td>
            <td>{{item.endDate | UTCdate}}</td>
            <td>{{item.rentPrice || '--'}}</td>
            <td>
							<div v-if="item.rentIncresePrice">
								<p v-for="item1 in item.rentIncresePrice.split(',')">{{ item1 }}</p>
							</div>
							<span v-else>--</span>
						</td>
          </tr>
        </tbody>
    </table>
  </div>
  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{totalCount || '0'}}</i>条记录</span>
      <span>每页<hl-select :data="pageCounts" v-model="limit" width="80" @on-change="getData"></hl-select>
        条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="getData"></hl-pagination>
    </div>
  </div>

</main>
<script src="modules/report_bi/scripts/report_resources.js" charset="utf-8"></script>
<style>
  #report_resources {
    padding: 0 24px;
  }

  .search-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding-bottom: 14px;
    border-bottom: 1px solid #E3E3E5;
  }

  .screening-container {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
  }

  .screening-item {
    display: flex;
    align-items: center;
  }
</style>